<template>
    <el-container>
        <el-header style="padding: 0px">
            <el-col :span="10" class="logo">{{$route.meta.title}}</el-col>
            <el-col :span="14" class="menu">
                <el-menu :default-active="$route.path" mode="horizontal" style="height: 60px" @select="handleselect">
                    <template v-for="(item,index) in $router.options.routes" v-if="item.name='三调数据云平台'">
                            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
                                          v-if="!child.hidden" style="margin: 0px 10px">
                                {{child.name}}
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
        </el-header>
        <el-main>
            <div>
                <router-view></router-view>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            handleselect: function (a, b) {
                this.$router.push(a);
            },
        },
        mounted() {
        }
    }

</script>

<style scoped lang="scss">
    @import '~scss_vars';

    .logo {
        height: 60px;
        line-height: 60px;
        font-size: 22px;
        padding-left: 20px;
        color: #ffffff;
        background-color: $color-primary;
    }

    .menu {
        height: 60px;
        line-height: 60px;
        padding-right: 20px;
        background-color: $color-primary;
    }

    .el-menu {
        background-color: $color-primary;
        float: right;
    }

    .el-menu--horizontal .el-menu-item {
        border-bottom: 4px solid #ffffff;
        color: #ffffff;
        padding: 0px;
    }

    .el-menu--horizontal .el-menu-item:hover {
        color: #ffffff;
        background-color: $color-primary;
        border-bottom: 4px solid #ffffff;
    }

    .el-menu--horizontal .el-menu-item:focus {
        color: #ffffff;
        background-color: $color-primary;
        border-bottom: 4px solid #ffffff;
    }


</style>